<template>
    <div class="goods">
        <van-nav-bar title="商品页" left-text="" left-arrow @click-left="goback" />
        <div class="main">
            <div class="images">
                <div class="swiper_contain">
                    <van-swipe class="my-swipe" :autoplay="4000" lazy-render>
                        <van-swipe-item v-for="image in images" :key="image.id">
                            <van-image :src="image.path" fit="cover" />
                        </van-swipe-item>
                    </van-swipe>
                </div>
            </div>
            <div class="des">
                <GoodsBasicVue :goodsDes="goodsDes"></GoodsBasicVue>
                <van-divider
                    :style="{ color: '#b8b8b8', borderColor: '#b8b8b8', padding: '0 16px' }"
                >
                    商品详情
                </van-divider>
                <div class="goodsInfo" ref="goodsInfo"></div>
            </div>
        </div>
        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" @click="goService" />
            <van-badge :content="cartNum" max="99">
                <van-action-bar-icon icon="cart-o" text="购物车" @click="goCart" />
            </van-badge>
            <van-action-bar-icon icon="shop-o" text="店铺" @click="goShop" />
            <van-action-bar-button type="danger" text="加入购物车" @click="getInCart" />
        </van-action-bar>
    </div>
</template>

<script setup>
import GoodsBasicVue from './components/GoodsBasic.vue';
import { useRoute, useRouter } from 'vue-router';
import { requestGet, requestGetNT, requestPost } from '@/utils/Request';
import { onMounted, reactive, ref } from 'vue';
import { useStore } from 'vuex';
const router = useRouter();
const route = useRoute();
const store = useStore();
const goodsId = route.query.id;
const token = store.state.user.token;
let goodsDes = ref({});
let images = ref([]);
let goodsInfo = ref(null);
const cartNum = ref(0);

const goService = () => {};
const goCart = () => {
    router.push('/cart');
};
const goShop = () => {};
const getInCart = async () => {
    if (!sessionStorage.getItem('isLogin')) {
        router.push('/login');
    } else {
        const data = {
            goods_id: +goodsId,
            num: 1,
            project_id: '238',
        };
        const res = await requestPost('/shoppingCart/', token, data);
        router.push('/cart');
    }
};
const goback = () => {
    store.commit('changeRouterType', 'back');
    router.back();
};
(async () => {
    const res = await requestGetNT(`/goods/${goodsId}`, {});
    goodsDes.value = res.data.result;
    images.value = goodsDes.value.s_goods_photos;
    goodsInfo.value.innerHTML = goodsDes.value.rich_text;
})();
(async () => {
    const res = await requestGet(`/shoppingCart?project_id=238`, token);
    cartNum.value = res.data.result.length;
})();
</script>

<style lang="scss" scoped>
@import '../../style/base.scss';
.goods {
    background-color: #f1f1f1;
    .main {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0.5rem;
        overflow-y: scroll;
        background-color: #f1f1f1;
        .images {
            margin-bottom: 0.2rem;
            width: 100%;
            height: 100vw;
            .my-swipe {
                width: 100%;
                height: 100vw;
                .van-swipe-item {
                    width: 100%;
                    height: 100vw;
                    .van-image {
                        width: 100%;
                    }
                }
            }
        }
        .des {
            width: 100%;
            background-color: #f1f1f1;
        }
    }
}
</style>
